
<template>
    <div ref="messageTag"
        style="visibility:hidden;width:500px;height:400px;position: absolute;color: #fff;z-index: 2;font-size: 16px;">
        <div style="position:relative;">
            <div style="position: absolute;left: 0px;top: 0px;">
                <img src="/images/granary/信息背景.png" alt="" style="width:400px;opacity: 1.0;">
            </div>
            <div id="granaryName" style="position:absolute;left:25px;top:40px;font-size:16px">
                {{ messageTagData.granaryName }}
            </div>
            <div style="position:absolute;left:290px;top:25px">
                <img src="/images/granary/温度.png" alt="" style="width:50px;">
            </div>

            <div style="position:absolute;left:330px;top:40px">
                <span id="temperature">
                    {{ messageTagData.temperature }}
                </span>℃
            </div>
            <div id="grain" style="position:absolute;left:170px;top:50px">
                <span id="grain">
                    {{ messageTagData.grain }}
                </span>(吨)
            </div>
            <div style="position:absolute;left:80px;top:85px;font-size:60px;color:#00ffff;vertical-align:middle">
                <img id="grainImg" src="/images/granary/豆子/红豆.png" alt="" style="width:60px;">
            </div>
            <div style="position:absolute;left:155px;top:80px;font-size:60px;color:#00ffff;vertical-align:middle">
                <span id="weight">
                    {{ messageTagData.weight }}
                </span>t
            </div>
            <div
                style="position:absolute;left:70px;top:170px;padding:8px 25px;border-radius:30px;border:1px solid #00ffff;">
                仓高—<span id="granaryHeight">
                    {{ messageTagData.granaryHeight }}
                </span>m</div>
            <div style="position:absolute;left:225px;top:170px;padding:8px 25px;">
                粮高— <span id="grainHeight">
                    {{ messageTagData.grainHeight }}
                </span> m
            </div>
        </div>
    </div>
    <div ref="content3d" class="content3d"></div>
</template>

<script setup lang="ts">
import Box from "./Box";
import { ref, onMounted, reactive } from "vue";
const content3d = ref(null);
const messageTag = ref(null);
const messageTagData = reactive({
    granaryName: "",
    temperature: "",
    grain: "",
    weight: "",
    granaryHeight: "",
    grainHeight: ""
});
onMounted(() => {
    new Box(content3d.value, messageTag.value, messageTagData);
})
</script>

<style lang="scss" scoped>
.content3d {
    position: relative;
    width: 100%;
    height: 100vh;
}
</style>
<style>
/* 粮仓标签的样式属性 */
.tag {
    box-shadow: 0 0 2px #00ffff inset;
    background: linear-gradient(#00ffff, #00ffff) left top,
        linear-gradient(#00ffff, #00ffff) left top,
        linear-gradient(#00ffff, #00ffff) right bottom,
        linear-gradient(#00ffff, #00ffff) right bottom;
    background-repeat: no-repeat;
    background-size: 1px 6px, 6px 1px;
    background-color: rgba(0, 0, 0, 0.4);
    color: #ffffff;
    font-size: 16px;
    padding: 4px 10px;
}
</style>